/** IT业务数据部件 
 * Author:      yangjq 
 * CreateTime:  2023/9/21 21:24:27 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:30:34 
 * Description: 
*/ 
<template>
  <div class="main-card">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 25%;">
      <img src="/images/screen-it/业务数据-B.png" style="height: 80px; width: 80px;" />
      <div style="font-size: 20px; margin-top: 10px">业务数据</div>
      <div style="font-size: 12px; margin-top: 0px">{{IndexLabel}}</div>
    </div>
    <div style="width: 75%;padding-left: 4px;">
      <el-carousel style="height: 100%; width: 100%;overflow-y:hidden;" indicator-position="outside" interval="10000" @change="doPlay">
        <el-carousel-item>
          <div ref="echartRef1" style="height: 100%; width: 100%"></div>
          <!-- <div style="height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: start">
            <div class="part-container" style="margin-bottom: 20px;">
              <img src="/images/screen-it/生产数据-B.png" class="part-icon" />
              <span class="part-header">生产数据:</span>
              <span class="part-content led-cls data-focus" style="color:#f82929;">{{ businessData.produce }}</span>        
              <span class="part-footer">Tb</span>
            </div>
            <div class="part-container">
              <img src="/images/screen-it/备份数据-B.png" class="part-icon" />
              <span class="part-header">备份数据:</span>
              <span class="part-content led-cls data-focus" style="color:#f3a60c;">{{ businessData.backups }}</span> 
              <span class="part-footer">Tb</span>
            </div>
          </div> -->
        </el-carousel-item>
        <el-carousel-item>
          <div ref="echartRef2" style="height: 100%; width: 100%"></div>
        </el-carousel-item>
        <el-carousel-item>
          <div ref="echartRef3" style="height: 100%; width: 100%"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, Ref, reactive, watchEffect, onMounted,onUnmounted, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import {defHttp} from "/@/utils/http/axios";

  let yearDatas = ['2016','2017','2018','2019','2020','2021','2022'];
  let produceDatas = ['2','3','5','6','6','3','5'];
  let backupsDatas = ['1','2','3','4','2','3','3'];

  const businessData = ref({
    produce: 2300,
    backups: 4500,
  });

  const brandList = ref(
    [
      ['储层预测', 2],
      ['\n地震解释', 30],
      ['地震资料处理', 51],
      ['\n油藏数值模拟', 23],
    ]
  );

  const echartRef1 = ref<HTMLDivElement | null>(null);
  const { setOptions: setOptions1, getInstance: chartInstance1 } = useECharts(echartRef1 as Ref<HTMLDivElement>, 'dark');
  const option1 = reactive({});

  //生产数据-备份数据
  function initCharts1() {
    Object.assign(
      option1,
      reactive({
        tooltip: {
          show: true,
          trigger: 'axis',
          borderWidth: 1,
          textStyle: {
            color: 'rgba(0, 0, 0, 0.7)',
            fontSize: 12,
          },
          // 坐标轴指示器，坐标轴触发有效
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        axisPointer: {
          snap: true,
          label: {
            backgroundColor: '#777',
          },
        },
        grid: { top: 'center', left: '14%',width:'80%', height: '80%',containLabel:true },
        xAxis: {
          type: 'category',
          name: '',
          show: true,
          nameLocation: 'end',
          axisLabel: {
            textStyle: {
              color: '#ffffff', //x轴文本颜色
              fontSize: 10,
            },
            interval: 0, //设置间隔为0
          },
          axisLine: {
            show: true,
          },
          axisTick: false,
          data:['生产数据','备份数据']
        },
        yAxis: {
          name: '容量(TB)',
          nameLocation: 'center',
          nameGap: 40,
          nameRotate: 90,
          nameTextStyle: {
            fontWeight: 700,
            fontSize: 12,
            color:'#ffffff'
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          //坐标线
          axisLine: {
            show: false,
          },
          axisTick: false,
          splitLine: { show: false },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0)', 'rgba(200,200,200,0.1)'],
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            type: 'bar',
            data: [
              { value: businessData.value.produce, name: '生产数据' },
              { value: businessData.value.backups, name: '备份数据' },
            ],
            name: '业务数据',
            yAxisIndex:0,
            barGap: '0%',
            barMaxWidth: 30,
            label:{
              show:true,
              color:'#fff',
              position: "outside",
              fontSize: 12,
            },
            colorBy: "data"
          },
          
        ],
      })
    );
    setOptions1(option1);
  }

  const echartRef2 = ref<HTMLDivElement | null>(null);
  const { setOptions: setOptions2, getInstance: chartInstance2 } = useECharts(echartRef2 as Ref<HTMLDivElement>, 'dark');
  const option2 = reactive({});

  function initCharts2() {
    Object.assign(
      option2,
      reactive({
        tooltip: {
          show: true,
          trigger: 'axis',
          borderWidth: 1,
          textStyle: {
            color: 'rgba(0, 0, 0, 0.7)',
            fontSize: 12,
          },
          // 坐标轴指示器，坐标轴触发有效
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        axisPointer: {
          snap: true,
          label: {
            backgroundColor: '#777',
          },
        },
        grid: { top: 'center', left: '14%',width:'80%', height: '80%',containLabel:true },
        xAxis: {
          type: 'category',
          name: '',
          show: true,
          nameLocation: 'end',
          axisLabel: {
            textStyle: {
              color: '#ffffff', //x轴文本颜色
              fontSize: 12,
            },
            interval: 0, //设置间隔为0
          },
          axisLine: {
            show: true,
          },
          axisTick:false,
        },
        yAxis: {
          name: '容量(TB)',
          nameLocation: 'center',
          nameGap: 48,
          nameRotate: 90,
          nameTextStyle: {
            fontSize: 12,
            color:'#ffffff'
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          //坐标线
          axisLine: {
            show: false,
          },
          axisTick: false,
          splitLine: { show: false },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0)', 'rgba(200,200,200,0.1)'],
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            type: 'bar',
            data: brandList.value,
            name: '生产数据',
            yAxisIndex:0,
            barGap: '0%',
            barMaxWidth: 30,
            label:{
              show:true,
              color:'#fff',
              position: "outside",
              fontSize: 12,
            },
            colorBy: "data"
          },
        ],
      })
    );
    setOptions2(option2);
  }


  const echartRef3 = ref<HTMLDivElement | null>(null);
  const { setOptions: setOptions3, echarts, getInstance : chartInstance3 } = useECharts(echartRef3 as Ref<HTMLDivElement>, 'dark');
  const option3 = reactive({});

  function initCharts3() {
    Object.assign(
      option3,
      reactive({
        tooltip: {
          show: true,
          trigger: 'axis',
          borderWidth: 1,
          textStyle: {
            color: 'rgba(0, 0, 0, 0.7)',
            fontSize: 12,
          },
          // 坐标轴指示器，坐标轴触发有效
          axisPointer: {
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        axisPointer: {
          snap: true,
          label: {
            backgroundColor: '#777',
          },
        },
        legend: {
          bottom: 0,
          textStyle: {
            fontWeight: 700,
            fontSize: 12,
            color: '#ffffff'
          },
        },
        grid: { top: 'center', left: '14%',width:'80%', height: '80%',containLabel:true },
        xAxis: {
          type: 'category',
          name: '',
          show: true,
          nameLocation: 'end',
          axisLabel: {
            textStyle: {
              color: '#fffff', //x轴文本颜色
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
          },
          axisTick: false,
          data: yearDatas,
        },
        yAxis: {
          name: '容量(TB)',
          nameLocation: 'center',
          nameGap: 48,
          nameRotate: 90,
          nameTextStyle: {
            fontSize: 12,
            color:'#ffffff'
          },
          axisLabel: {
            textStyle: {
              color: '#ffffff',
            },
          },
          //坐标线
          axisLine: {
            show: false,
          },
          axisTick: false,
          splitLine: { show: false },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0)', 'rgba(200,200,200,0.1)'],
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            type: 'line',
            data: produceDatas,
            name: '生产',
            // id: "0",
            barGap: '0%',
            barMaxWidth: 30,
            label: {
              show: true,
              // rotate: 90,
              color:'#fff',
              align: 'center',
              verticalAlign: 'middle',
              position: 'top',
            },
          },
          {
            type: 'line',
            data: backupsDatas,
            name: '备份',
            // id: "0",
            barGap: '0%',
            barMaxWidth: 30,
            label: {
              show: true,
              // rotate: 90,
              color:'#fff',
              align: 'center',
              verticalAlign: 'middle',
              position: 'top',
            },
          },
        ],
      })
    );
    setOptions3(option3);
  }

  const IndexLabel = ref('(当前)');
  const doPlay = (value) => {
    if(value==0){
      IndexLabel.value = '(当前)';
      return;
    }

    if(value==1){
      IndexLabel.value = '(业务类型)';
      return;
    }

    if(value==2){
      IndexLabel.value = '(历史)';
      return;
    }
  };

  function loadData(){
    let bList = []
    let hList = []
    let api = "/j_monitoring/licenseSoftware/readBusinessSettingJson";
    let params = {};
    let options = {isTransformResponse: false};
    defHttp.get({url: api, params}, options)
      .then((res) => {
        if (res.success) {
          yearDatas = [];
          produceDatas = [];
          backupsDatas = [];
          brandList.value = [];

          let record = JSON.parse(res.result.value)
          Object.assign(businessData.value, record)
          bList = record.brandList ? record.brandList : [];
          hList = record.historyList ? record.historyList : [];
          hList.sort((a,b)=> a['year']-b['year']);

          for (var i = 0; i < bList.length; i++) {
            var numberArr = [(i%2==0? '\n':'') + bList[i]['brand'], bList[i]['number']];
            brandList.value.push(numberArr)
          }

          for (var i = 0; i < hList.length; i++) {
            yearDatas.push(hList[i]['year'])
            produceDatas.push(hList[i]['produce'])
            backupsDatas.push(hList[i]['backups'])
          }

        } else {
          console.log('接口错误用默认');
        }
      }).finally(() => {
        initCharts1();
        initCharts2();
        initCharts3();     
    });
  }

  let timer;
  onMounted(() => {
    loadData();
    timer = setInterval(() => {
      loadData();
    }, 60*60000); // 根据需要调整滚动间隔
  });

  onUnmounted(()=>{
    if(timer){
      clearInterval(timer);
    }
  });
</script>


<style scoped lang="less">
.main-card {
  display: flex; 
  flex-direction: row; 
  color: whitesmoke; 
  height: 100%; 
  width: 100%; 
  padding: 10px;
}

.part-container {
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: baseline;
  font-size: 20px;
}
.part-content{
  color: #d93d09;
  font-weight: 400;
  font-size: 22px;
  margin-left: 10px;
  margin-right: 10px;
}
.part-icon {
  width: 24px;
  height: 24px;
  margin-top: 16px;
  margin-right: 8px;
}

.part-header {
  font-weight: normal;
  font-size: 20px;
}

.part-footer {
  font-weight: normal;
  font-size: 16px;
}

.data-focus {
  font-size: 2.2rem;
  font-weight: 500;
}

.data-normal {
  font-size: 1.8rem;
  font-weight: 400;
  opacity: 0.8;
}

.led-cls {
  font-family: 'electronicFont';    
}
</style>
